<template>
    <Teleport to="body">
        <ul class="fiexdBox" @click="getLiId">
            <li data-id="1">
                <div class="new">新手指南</div>
            </li>
            <li data-id="2">
                <el-icon class="icon">
                    <Star />
                </el-icon>
            </li>
            <li data-id="3">
                <el-icon class="icon">
                    <ChatDotRound />
                </el-icon>
            </li>
            <li data-id="4">
                <el-icon class="icon">
                    <ShoppingCart />
                </el-icon>
            </li>
            <li data-id="5">
                <el-icon class="icon">
                    <Edit />
                </el-icon>
            </li>
            <li data-id="6" @click="backTop" v-if="showBtn">
                <el-icon class="icon">
                    <Top />
                </el-icon>
            </li>
        </ul>
    </Teleport>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    data() {
        return {
            showBtn: false,
            styleObject: {}
        }
    },
    methods: {
        getLiId(event: Event) {
            const target = event.target as HTMLElement;
            if (target.tagName === 'LI') {
                const dataId = target.dataset.id;
                // console.log(dataId);
                //根据获取的ID进行判断跳转到对应的页面,现在只是固定跳转到一个页面
                this.$router.push({ path: '/special' });
            }
        },
        showbtn() {
            let that = this as unknown as HTMLElement;
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            that.scrollTop = scrollTop;
            if (scrollTop > 750) {
                this.showBtn = true;
            } else {
                this.showBtn = false
            }
        },
        backTop() {
            let timer = setInterval(() => {
                let osTop = document.documentElement.scrollTop || document.body.scrollTop;
                let ispeed = Math.floor(-osTop / 5);
                document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
                if (osTop === 0) {
                    clearInterval(timer);
                }
            }, 10);
        },
    },
    mounted() {
        window.addEventListener('scroll', this.showbtn, true);
    }
})
</script>

<style lang="scss" scoped>
.fiexdBox {
    width: 50px;
    height: 288px;
    background-color: white;
    position: fixed;
    top: 160px;
    right: 0;
    box-shadow:rgb(204, 203, 203) 2px 2px 2px 2px ;

    >li {
        width: 50px;
        height: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        >.new {
            width: 30px;
            height: 30px;
            font-size: 14px;
        }

        .icon {
            width: 30px;
            height: 30px;
            font-size: 22px;
        }
    }
}

// li:hover {
//     background-color: rgba(0, 0, 0, 0.5);
//     color: white;
// }

.icon::before {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    left: 0px;
    top: 0px;
    border-top: 1px solid rgba(236, 235, 235, 0.8);
}
</style>


